<style type="text/css" lang="less">
@import url("../../assets/less/common.less");
</style>

<template>
    <div class="content">
        <Form ref="User" :model="User" :rules="ruleValidate" :label-width="100">
            <Row>
                <Col span="12">
                    <FormItem label="用户名" prop="name">
                        <Input v-model="User.name" clearable></Input>
                    </FormItem>
                    <FormItem label="密码" prop="pwd">
                        <Input v-model="User.pwd" clearable></Input>
                    </FormItem>
                    <FormItem label="电话" prop="phone">
                        <Input v-model="User.phone" clearable></Input>
                    </FormItem>
                    <FormItem label="邮箱" prop="email">
                        <Input v-model="User.email" clearable></Input>
                    </FormItem>
                    <FormItem label="部门" prop="partment">
                        <Input v-model="User.partment" clearable></Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit('User')">提交</Button>
                        <Button @click="fallBack" style="margin-left: 8px;">返回</Button>
                    </FormItem>
                </Col>
            </Row>    
    </Form>
    </div>
</template>
<script>
	import getLocaleTime from './getLocaleTime'
	import {get, post} from '@/api/ajax'
	export default{
        data(){
            return {
                User :{
                	time:''
                },
                ruleValidate : {
                    name : [{required : true,message : '用户名不能为空'},{type : 'string',max : 20,message:'长度不超过20'}],
                    pwd : [{required : true,message :'密码不能为空',},{type : 'string',pattern : /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,20}$/, message:'字母数字组合长度6-16',trigger :'blur'}],
                    phone : [{required : true,message : '手机号不能为空'},{type : 'string',message : '请输入正确手机号',trigger : 'blur',pattern : /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/,}],
                    email : [{required : true,message : '邮箱不能为空'},{type : 'email',message : '请输入正确邮箱',trigger : 'blur'}],
                    partment:[{required : true,message : '部门名称不能为空'},{type : 'string', message:'字母数字组合长度6-16',trigger :'blur'}]
                }
            }
        },
        methods : {
            handleSubmit(val){
            	this.User.time = getLocaleTime();
            	this.$refs[val].validate((valid) => {
                    if (valid) {
                    	post('http://localhost:3000/users',this.User)
                    	         .then(res =>{
                    	         	this.$Message.success('提交信息成功!');
					        	    this.$router.go(-1)
                    	         })
                    	         .catch(error => {
                    	         	this.$Message.error('提交信息失败!');
                    	         })
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            fallBack(){
	              this.$router.go(-1)
            }

        }
    }
</script>

